<template>
  <el-dialog
    title="资源选择"
    :visible.sync="isShowSelectSource"
    width="90%"
    :show-close="false"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <div class="schoolSource" v-loading="isLoading">
      <div class="source-tab">
        <div @click="changeIsSchool('1')" :class="type == 1 ?'checked':''" class="tab-item">
          校本资源
        </div>
        <div class="tab-hr">
          /
        </div>
        <div @click="changeIsSchool('2')" :class="type == 2 ? 'checked':''" class="tab-item">
          我的上传
        </div>
      </div>
      <div class="source-select">
        <div class="select-name">
          名称：
        </div>
        <div class="select-input">
          <el-input placeholder="请输入资源名称" clearable  v-model="pageSource.fileName" size="mini" />
          <el-button type="primary" style="margin-left: .2vw" @click="getSchoolSourceList" size="mini">查询</el-button>
        </div>
        <div class="select-type">
          <div class="type-label">类型：</div>
          <div class="type-item " :class="pageSource.resourceClassification == 2? 'checked-item':''" @click="changeSourceType('2')">全部</div>
          <div class="type-item" :class="pageSource.resourceClassification == 0? 'checked-item':''" @click="changeSourceType('0')">教学资源</div>
          <div class="type-item"  :class="pageSource.resourceClassification == 1? 'checked-item':''" @click="changeSourceType('1')">课堂小游戏</div>
          <div class="type-item"  :class="pageSource.resourceClassification == 3? 'checked-item':''" @click="changeSourceType('3')">其他</div>
        </div>
        <div class="select-type-status">
          <div class="status-item" :class="pageSource.type == 1 ?'checked-status':''" @click="changeType('1')">视频</div>
          <div class="status-gang">/</div>
          <div class="status-item" :class="pageSource.type == 0  && pageSource.type != '' ? 'checked-status':''" @click="changeType('0')">图片</div>
        </div>
      </div>
      <div class="source-main">
        <div v-if="total == 0" style="display: flex;align-items: center;justify-content: center;width: 100%;height: 100%">
          <img style="width: 100%;height: 60%;object-fit: contain" src="../../../../assets/course_img/nullSouceShow.png" alt="">
        </div>
        <div class="main">


          <div class="main-item" @click="changeCheckedSource(item)" v-for="item in schoolSourceList" :key="item.srcId">
            <div class="item-img">
              <img v-if="item.type ==0" :src="$store.state.user.BASE_URL + item.src" alt="">
              <video v-if="item.type ==1" :src="$store.state.user.BASE_URL + item.src" alt="" />
              <div class="item-tag">
                {{item.type == 0 ? '图片' :'视频'}}
              </div>
              <div class="item-checkedTag" v-if="checkedSource.map(val=>val.srcId).includes(item.srcId)">
              <i class="el-icon-check"></i>
            </div>
            </div>
            <div class="item-title">
              {{item.fileName}}
            </div>
          </div>


        </div>

      </div>
      <div class="source-page">
        <pagination-page @size="changeSize" @page="changePage" :total="total" />
      </div>
    </div>

    <span slot="footer" class="dialog-footer">
    <el-button size="small" @click="close">取 消</el-button>
    <el-button type="primary"  size="small" @click="addSource">确 定</el-button>
  </span>
  </el-dialog>

</template>

<script>

import {getSchoolSource} from "@/api/schoolSource";

export default {
  name: "incrementCourse",
  props:{
    isShowSelectSource:{
      type:Boolean
    },
    sourceList:{
      type:Array
    }
  },
  data(){
    return {
      type:1,
      schoolSourceList:[],
      isLoading:false,
      total:0,
      pageSource:{
        pageNum:1,
        pageSize:10,
        teacherId:this.$store.state.user.USER_INFO.id,
        fileName:"",
        type:"",
        resourceClassification:2,
      },
      checkedSource:[]
    }
  },
  created() {
    this.getSchoolSourceList()
  },
  methods: {
    initSource(){
      let checkedSourceList = this.sourceList.map(item=> item.srcId);
      let arr = [];
      checkedSourceList.forEach(item=>{
        let result = this.schoolSourceList.filter(v=> v.srcId == item);
        if(result.length){
          arr.push(result[0])
        }
      })
      this.checkedSource = arr;
    },
    addSource(){
      this.$emit("addList",this.checkedSource);
      this.close()
    },
    changeCheckedSource(e){
      console.log(e);
      let checkedId = this.checkedSource.map(item=>item.srcId);
      if(checkedId.includes(e.srcId)){
        this.checkedSource = this.checkedSource.filter(item=> item.srcId !== e.srcId)
      }else{
        this.checkedSource = [...this.checkedSource,e]
      }
    },
    close(){
      this.$emit("close",false)
    },
    changeIsSchool(e){
      this.type = e;
      this.getSchoolSourceList()
    },
    goCreate(){
      this.$router.push("/createSchoolSource")
    },
    changeType(e){
      if(this.pageSource.type == e){
        this.pageSource.type = ""
      }else{
        this.pageSource.type = e
      }
      this.getSchoolSourceList();
    },
    changeSourceType(e){
      if(this.pageSource.resourceClassification != e){
        this.pageSource.resourceClassification = e;
        this.getSchoolSourceList();
      }
    },
    getSchoolSourceList(){
      this.isLoading = true
      getSchoolSource({
        ...this.pageSource,
        resourceClassification:this.pageSource.resourceClassification == 2 ? '':this.pageSource.resourceClassification,
        schoolId:this.type == 1 ? this.$store.state.user.USER_INFO.pscShId:""
      }).then(response=>{
        console.log(response);
        this.isLoading = false;
        if(response.code == 200){
          this.schoolSourceList = response.result;
          this.total = response.total;
          this.initSource()
        }
      })
    },
    changeSize(e){
      this.pageSource.pageSize = e;
      this.getSchoolSourceList();
    },
    changePage(e){
      console.log(e)
      this.pageSource.pageNum = e;
      this.getSchoolSourceList()
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    back(){
      this.$router.back()
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog {
  margin-top: 3vh !important;
  max-height: 90vh;
  overflow-y: auto;
  .el-dialog__body{
    padding: 1.2vw !important;
  }
}
.course-form {
  background: #fff;
  padding: 0vh 1vw 0;
  margin:1vh 0;
  ::v-deep .el-radio {
    margin: 10px;
  }
  .source {
    display: flex;
    flex-direction: column;
    .top-source {
      display: flex;
      .source-my {
        font-size: .8vw;
        color: #1677FF;
        cursor: pointer;
      }
      .source-school {
        font-size: .8vw;
        color: #1677FF;
        margin-left: 2vw;
        cursor: pointer;
      }
    }
    .source-val {
      display: flex;
      width: 80%;
      align-items: center;
      padding: .5vh .5vw;
      background: #ECF4FF;
      .val-icon {
        color: #1677FF;
        i{
          font-size: 1.3vw;
        }
      }
      .val-text {
        color: #666666;
        margin-left: .2vw;
        font-size: .8vw;
      }
      .val-del {
        color: #FF6162;
        margin-left: 10vw;
        font-size: .7vw;
      }
    }
  }
}
.schoolSource {
  height: 70vh;
  background: #fff;
  padding: 0vw;
  .source-tab {
    display: flex;
    .tab-item {
      font-size: 1.5vw;
      margin-left: 1vw;
      color: #999999;
      cursor: pointer;
    }
    .tab-hr {
      margin-left: 1vw;
      font-size: 1.5vw;
    }
    .checked {
      color: #333333;
      position: relative;
      &::after{
        content:"";
        width: 100%;
        height: .2vh;
        position: absolute;
        bottom: -1vh ;
        left: 0;
        transform: scaleX(.7);
        background: #1677FF;
        border-radius: 1vw;
      }
    }
  }
  .source-select {
    display: flex;
    margin-top: 2vh;
    align-items: center;
    white-space: nowrap;
    .select-name {
      margin-left: 3vw;
      font-size: 1.3vw;
    }
    .select-input {
      margin-left: .2vw;
      display: flex;
    }
    .select-type {
      display: flex;
      margin-left: 1vw;
      align-items: center;
      .type-label {
        font-size: 1.3vw;
      }
      .type-item {
        font-size: 1vw;
        padding: .4vw 1vw;
        background: red;
        margin-left: .5vw;
        color: #999999;
        background: none;
        cursor: pointer;
      }
      .checked-item {
        background: #D9EDFF;
        color:#1677FF ;
      }
    }
    .select-type-status {
      display: flex;
      align-items: center;
      margin-left: 30vw;
      white-space: nowrap;
      .status-item {
        font-size: 1vw;
        color: #999999;
        cursor: pointer;
      }
      .status-gang {
        font-size: 1.2vw;
        color: #333333;
        transform: rotateY(27deg);
        margin-left: .5vw;
        margin-right: .5vw;
      }
      .checked-status {
        color:#1677FF ;
      }
    }
  }
  .source-main {
    //background: silver;
    height: 55vh;
    margin-top: 1vh;
    .main {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      gap: .4vw; /* 子元素之间的边距 */
      padding-left: 2vw;
      max-height: 55vh;
      min-height: 55vh;
      overflow-y: auto;
      .main-item {
        flex: 0 0 calc(25% - 10px); /* 子元素的宽度和边距 */
        box-shadow: 0 0 .2vw 0px rgba(0,0,0,0.2);
        box-sizing: border-box;
        margin-top: 1vh;
        height: 28vh;
        display: flex;
        align-items: center;
        flex-direction: column;
        .item-img {
          width: 100%;
          height: 23vh;
          min-height: 23vh;
          min-width: 100%;
          max-width: 100%;
          max-height: 23vh;
          position: relative;
          img{
            height: 100%;
            width: 100%;
            object-fit: contain;
            margin: 0;
          }
          video {
            height: 100%;
            width: 100%;
            object-fit: contain;
            margin: 0;
          }
          .item-tag {
            position: absolute;
            left: .5vw;
            top: 1vh;
            background: #ffffff;
            padding:.5vh .8vw;
            font-size: 1vw;
            color: #1677FF;
            border-radius: .3vw;
          }
          .item-checkedTag {
            background: #1677FF;
            position: absolute;
            top: 1vh;
            right: .5vw;
            color: #FFFFFF;
            border-radius: 50%;
            width: 1.6vw;
            height: 1.6vw;
            display: flex;
            justify-content: center;
            align-items: center;
            i {
              font-weight: bold;
              font-size: 1.2vw;
            }
          }
        }
        .item-title {
          display: flex;
          flex: 1;
          align-items: center;
          font-size: 1.2vw;
          font-weight: 550;
        }
      }
    }

  }
  .source-page {
    height: 8vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.source-list {
  max-height: 15vh;
  overflow-y: auto;
 }
</style>
